<template>
  <scroll-view
    class="menu-list"
    scroll-y
    scroll-with-animation
    :style="'height:' + scrollHeight + 'px; top:' + scrollTop + 'ox'"
    :scroll-into-view="`classifyItemId${menuIndex + 1}`"
  >
    <!-- 骨架屏 -->
    <view class="skeleton-view" v-if="classifyLoading">
      <view
        class="skeleton-item"
        v-for="(item, index) in Array(1)"
        :key="index"
      >
        <u-skeleton rows="12" loading :title="false" />
      </view>
    </view>

    <view
      class="menu-item safe-left flex flex-middle flex-center"
      v-for="(item, index) in list"
      :key="index"
      :class="{ active: index == menuIndex }"
      :id="`classifyItemId${index + 1}`"
      @click="changeMenu(index)"
    >
      {{ item.name }}
    </view>
  </scroll-view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    listLoad: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    classifyLoading: {
      type: Boolean,
      default: false,
    },
    menuIndex: {
      type: Number,
      default: 0,
    },
    changeMenuIndex: {
      type: Function,
      default: () => {},
    },
  },
  computed: {
    ...mapGetters(["system"]),
    scrollHeight() {
      const { windowHeight, statusBarHeight, safeAreaInsets } = this.system;
      return (
        windowHeight - (statusBarHeight + 44 + 41 + 50 + safeAreaInsets.bottom)
      );
    },
    scrollTop() {
      const { statusBarHeight } = this.system;
      return statusBarHeight + 44 + 61;
    },
  },
  methods: {
    changeMenu(index) {
      if (this.listLoad) return; // 节流
      this.changeMenuIndex(index);
    },
  },
};
</script>

<style scoped lang="scss">
.skeleton-view {
  padding: 16px;
}

.menu-list {
  position: fixed;
  left: 0;
  background: #f6f6f6;
  width: 96px;

  .active {
    color: 000 !important;
    background: #fff;
  }

  .menu-item {
    height: 44px;
    font-size: 15px;
    color: #6c6c6c;
  }
}
</style>